<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>贷款超市管理</el-breadcrumb-item>
      <el-breadcrumb-item>贷款超市管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="已开启" name="1">
          <el-row :gutter="20" style="position: relative">
            <el-col :span="6">
              <el-input
                v-model="seachlist.name"
                placeholder="平台名称"
                clearable
              >
                <el-button
                  slot="append"
                  @click="getsearchTableList"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
            </el-col>
            <!-- <el-col :span="3">
							<el-select v-model="seachlist.status" placeholder="选择状态">
								<el-option value="" label="选择状态"></el-option>
								<el-option key="1" label="开启" value="1"></el-option>
								<el-option key="0" label="关闭" value="0"></el-option>
							  </el-select>
						</el-col> -->
            <!-- <el-button type="primary" @click="getsearchTableList">搜索</el-button> -->
            <!-- <el-button @click="clear">清空</el-button> -->
            <el-button
              style="position: absolute; right: 10px"
              type="primary"
              @click="showAdd"
              >添加平台</el-button
            >
          </el-row>
          <el-table :data="tableList" border stripe>
            <el-table-column
              label="序号"
              prop="sort"
              width="50px"
            ></el-table-column>
            <el-table-column label="平台名称" prop="dcName"></el-table-column>
            <el-table-column label="平台图标">
              <template slot-scope="scope">
                <img :src="scope.row.icon" alt="" class="scope-img" />
              </template>
            </el-table-column>
            <el-table-column
              label="链接"
              prop="dcPath"
              width="300px"
            ></el-table-column>
            <el-table-column label="类型" prop="loanMarketType">
              <template slot-scope="scope">
                {{
                  scope.row.loanMarketType
                    ? loanMarketTypeList.find(
                        (item) => item.code == scope.row.loanMarketType
                      ).value
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="今日产值(元)"
              prop="totalAmt"
            ></el-table-column>
            <el-table-column label="是否推荐">
              <template slot-scope="scope">
                <i v-if="scope.row.type == 1" class="el-icon-success"></i>
                <i v-else-if="scope.row.type == 0" class="el-icon-error"></i>
              </template>
            </el-table-column>
            <el-table-column
              label="入驻开始时间"
              prop="fkStartTime"
            ></el-table-column>
            <el-table-column
              label="入驻结束时间"
              prop="fkEndTime"
            ></el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  @change="statusChanged(scope.row, scope.row.id)"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="数据" align="center">
              <template slot-scope="scope">
                <div @click="goDetail(scope.row.id)" class="tablelist-li-tit">
                  查看数据
                </div>
                <!-- <el-button
                  @click="goDetail(scope.row.id)"
                  type="primary"
                  size="mini"
                  >查看数据</el-button
                > -->
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- <el-button @click="showEdit(scope.row.id)" type="primary" size="mini">平台配置</el-button> -->

                <div @click="recharge(scope.row.id)" class="tablelist-li-tit">
                  充值
                </div>
                <div @click="showEdit(scope.row.id)" class="tablelist-li-tit">
                  平台配置
                </div>

                <div
                  @click="showAllotChannel(scope.row.id)"
                  class="tablelist-li-tit"
                >
                  分配渠道
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageCount"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="2">
          <el-row :gutter="20" style="position: relative">
            <el-col :span="6">
              <el-input v-model="nameC" placeholder="平台名称" clearable>
                <el-button
                  slot="append"
                  @click="getsearchTableListC"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
            </el-col>
            <el-button
              style="position: absolute; right: 10px"
              type="primary"
              @click="showAdd"
              >添加平台</el-button
            >
          </el-row>
          <el-table :data="tableListC" border stripe>
            <el-table-column
              label="序号"
              prop="sort"
              width="50px"
            ></el-table-column>
            <el-table-column label="平台名称" prop="dcName"></el-table-column>
            <el-table-column label="平台图标">
              <template slot-scope="scope">
                <img :src="scope.row.icon" alt="" class="scope-img" />
              </template>
            </el-table-column>
            <el-table-column
              label="链接"
              prop="dcPath"
              width="300px"
            ></el-table-column>
            <el-table-column
              label="单价(元)"
              prop="singleAmt"
            ></el-table-column>
            <el-table-column
              label="今日产值(元)"
              prop="totalAmt"
            ></el-table-column>
            <el-table-column label="是否推荐">
              <template slot-scope="scope">
                <i v-if="scope.row.type == 1" class="el-icon-success"></i>
                <i v-else-if="scope.row.type == 0" class="el-icon-error"></i>
              </template>
            </el-table-column>
            <el-table-column
              label="入驻开始时间"
              prop="fkStartTime"
            ></el-table-column>
            <el-table-column
              label="入驻结束时间"
              prop="fkEndTime"
            ></el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  @change="statusChanged(scope.row, scope.row.id)"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="数据">
              <template slot-scope="scope">
                <el-button
                  @click="goDetail(scope.row.id)"
                  type="primary"
                  size="mini"
                  >查看数据</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="showEdit(scope.row.id)"
                  type="primary"
                  size="mini"
                  >平台配置</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChangeC"
            @current-change="handleCurrentChangeC"
            :current-page="pageCountC"
            :page-size="pageSizeC"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalC"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog title="添加平台" :visible.sync="addDialogVisible" width="50%">
      <el-form ref="addFormRef" :model="addForm" label-width="120px">
        <el-form-item label="平台名称">
          <el-input v-model="addForm.dcName"></el-input>
        </el-form-item>
        <el-form-item label="平台类型">
          <el-select v-model="addForm.loanMarketType" placeholder="选择类型">
            <el-option
              v-for="(item, index) in loanMarketTypeList"
              :label="item.value"
              :value="item.code"
              :key="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台图标">
          <el-button type="primary" size="mini" @click="chooseImage"
            >点击上传</el-button
          >
          <input
            @change="photoChange($event)"
            type="file"
            id="upload_file"
            multiple
            style="display: none"
          />
          <div v-if="addForm.icon != ''">
            <img
              class="editIcon"
              :src="'data:image/jpeg;base64,' + addForm.icon"
            />
          </div>
        </el-form-item>
        <el-form-item label="着陆页">
          <el-input v-model="addForm.dcPath"></el-input>
        </el-form-item>
        <el-form-item label="日租金">
          <el-input
            v-model="addForm.dayInterestRate"
            type="text"
            style="width: 100px"
          ></el-input
          >~
          <el-input
            v-model="addForm.rentUnit"
            type="text"
            style="width: 100px"
            placeholder="元/天、元/月"
          ></el-input>
        </el-form-item>
        <el-form-item label="最低可借期限-月">
          <el-input
            v-model="addForm.minAmt"
            type="number"
            style="width: 100px"
            placeholder="3"
          ></el-input>
          ~
          <el-input
            v-model="addForm.maxAmt"
            type="number"
            style="width: 100px"
            placeholder="12"
          ></el-input>
        </el-form-item>
        <el-form-item label="租借人数">
          <el-input v-model="addForm.loanPeople"></el-input>
        </el-form-item>
        <el-form-item label="入驻时间范围">
          <el-date-picker
            @change="onChangeDate"
            v-model="datePicker"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="上架开始时间">
          <el-time-picker
            v-model="addForm.shelvesStartTime"
            :picker-options="{}"
            placeholder="请选择上架开始时间"
            format="HH:mm"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="上架结束时间">
          <el-time-picker
            v-model="addForm.shelvesEndTime"
            :picker-options="{}"
            placeholder="请选择上架结束时间"
            value-format="HH:mm"
            format="HH:mm"
          ></el-time-picker>
        </el-form-item>
        <el-form-item label="结算方式">
          <el-select v-model="addForm.settleType" placeholder="请选择结算方式">
            <el-option
              v-for="item in settleTypeOptions"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算单价(元)">
          <el-input-number v-model="addForm.settleUnitPrice"></el-input-number>
        </el-form-item>
        <el-form-item label="充值总金额(元)">
          <el-input-number
            v-model="addForm.rechargeTotleAmount"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="充值剩余金额(元)">
          <el-input-number
            v-model="addForm.rechargeRemainingAmount"
          ></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="入驻开始时间">
          <el-date-picker
            v-model="addForm.fkStartTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入驻结束时间">
          <el-date-picker
            v-model="addForm.fkEndTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item
          v-for="(item, index) in addForm.tagVoList"
          :key="index"
          label="营销标签"
        >
          <el-input
            v-model="item.value"
            class="inp-1"
            placeholder="请输入标签内容"
          ></el-input>
          <el-input
            v-model="item.code"
            class="inp-2"
            placeholder="请输入标签色值"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价(元)">
          <el-input v-model="addForm.singleAmt"></el-input>
        </el-form-item>
        <el-form-item label="热门标识">
          <el-radio v-model="addForm.isHot" label="1">开启</el-radio>
          <el-radio v-model="addForm.isHot" label="0">关闭</el-radio>
        </el-form-item>
        <el-form-item label="未登录是否可见">
          <el-radio v-model="addForm.isLoginShow" label="0">是</el-radio>
          <el-radio v-model="addForm.isLoginShow" label="1">否</el-radio>
        </el-form-item>
        <el-form-item label="在首页展示">
          <div class="formitem">
            <el-radio v-model="addForm.type" label="1">是</el-radio>
            <el-radio v-model="addForm.type" label="0">否</el-radio>
            <el-input v-model="addForm.sort" placeholder="输入排序"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="在拒量页展示">
          <div class="formitem">
            <el-radio v-model="addForm.rejectType" label="1">是</el-radio>
            <el-radio v-model="addForm.rejectType" label="0">否</el-radio>
            <el-input
              v-model="addForm.rejectSort"
              placeholder="输入排序"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="在发现页展示">
          <div class="formitem">
            <el-radio v-model="addForm.loanType" label="1">是</el-radio>
            <el-radio v-model="addForm.loanType" label="0">否</el-radio>
            <el-input
              v-model="addForm.loanSort"
              placeholder="输入排序"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="Android访问">
          <el-radio v-model="addForm.androidStatus" label="app"
            >app内访问</el-radio
          >
          <el-radio v-model="addForm.androidStatus" label="llq"
            >浏览器访问</el-radio
          >
        </el-form-item>
        <el-form-item label="IOS访问">
          <el-radio v-model="addForm.iosStatus" label="app">app内访问</el-radio>
          <el-radio v-model="addForm.iosStatus" label="llq"
            >浏览器访问</el-radio
          >
        </el-form-item>
        <el-form-item label="保存后立即开启">
          <el-radio v-model="addForm.status" label="1">立即开启</el-radio>
          <el-radio v-model="addForm.status" label="0">暂不开启</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSub">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="editDialogVisible" width="50%">
      <el-form ref="editFormRef" :model="editForm" label-width="120px">
        <el-form-item label="平台名称">
          <el-input v-model="editForm.dcName"></el-input>
        </el-form-item>
        <el-form-item label="平台类型">
          <el-select v-model="editForm.loanMarketType" placeholder="选择类型">
            <el-option
              v-for="(item, index) in loanMarketTypeList"
              :label="item.value"
              :value="item.code"
              :key="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台图标">
          <el-button type="primary" size="mini" @click="chooseImageUpdate"
            >点击上传</el-button
          >
          <input
            @change="photoUpdateChange($event)"
            type="file"
            id="upload_file_update"
            multiple
            style="display: none"
          />
          <div>
            <img
              class="editIcon"
              :src="'data:image/jpeg;base64,' + editForm.icon"
            />
          </div>
        </el-form-item>
        <el-form-item label="着陆页">
          <el-input v-model="editForm.dcPath"></el-input>
        </el-form-item>
        <el-form-item label="日租金">
          <el-input
            v-model="editForm.dayInterestRate"
            type="number"
            style="width: 100px"
          ></el-input
          >~

          <el-input
            v-model="editForm.rentUnit"
            type="text"
            style="width: 100px"
            placeholder="元/天、元/月"
          ></el-input>
        </el-form-item>
        <el-form-item label="最低可借期限-月">
          <el-input
            v-model="editForm.minAmt"
            type="number"
            style="width: 100px"
            placeholder="3"
          ></el-input>
          ~
          <el-input
            v-model="editForm.maxAmt"
            type="number"
            style="width: 100px"
            placeholder="12"
          ></el-input>
        </el-form-item>
        <el-form-item label="租借人数">
          <el-input v-model="editForm.loanPeople"></el-input>
        </el-form-item>
        <!-- <el-form-item label="入驻开始时间">
          <el-date-picker
            v-model="editForm.fkStartTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入驻结束时间">
          <el-date-picker
            v-model="editForm.fkEndTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="入驻时间范围">
          <el-date-picker
            @change="onChangeDate"
            v-model="datePicker"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="上架开始时间">
          <el-time-picker
            v-model="editForm.shelvesStartTime"
            :picker-options="{}"
            placeholder="请选择上架开始时间"
            format="HH:mm"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="上架结束时间">
          <el-time-picker
            v-model="editForm.shelvesEndTime"
            :picker-options="{}"
            placeholder="请选择上架结束时间"
            value-format="HH:mm"
            format="HH:mm"
          ></el-time-picker>
        </el-form-item>
        <el-form-item label="结算方式">
          <el-select v-model="editForm.settleType" placeholder="请选择结算方式">
            <el-option
              v-for="item in settleTypeOptions"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算单价(元)">
          <el-input-number v-model="editForm.settleUnitPrice"></el-input-number>
        </el-form-item>
        <el-form-item label="充值总金额(元)">
          <el-input-number
            v-model="editForm.rechargeTotleAmount"
            disabled
          ></el-input-number>
        </el-form-item>
        <el-form-item label="充值剩余金额(元)">
          <el-input-number
            v-model="editForm.rechargeRemainingAmount"
            disabled
          ></el-input-number>
        </el-form-item>

        <el-form-item
          v-for="(item, index) in editForm.tagVoList"
          :key="index"
          label="营销标签"
        >
          <el-input
            v-model="item.value"
            placeholder="请输入标签内容"
            class="inp-1"
          ></el-input>
          <el-input
            v-model="item.code"
            placeholder="请输入标签色值"
            class="inp-2"
          ></el-input>
        </el-form-item>
        <el-form-item label="当日单价">
          <el-input v-model="editForm.singleAmt"></el-input>
        </el-form-item>
        <el-form-item label="热门标识">
          <el-radio v-model="editForm.isHot" label="1">开启</el-radio>
          <el-radio v-model="editForm.isHot" label="0">关闭</el-radio>
        </el-form-item>
        <el-form-item label="未登录是否可见">
          <el-radio v-model="editForm.isLoginShow" label="0">是</el-radio>
          <el-radio v-model="editForm.isLoginShow" label="1">否</el-radio>
        </el-form-item>
        <el-form-item label="在首页展示">
          <div class="formitem">
            <el-radio v-model="editForm.type" label="1">是</el-radio>
            <el-radio v-model="editForm.type" label="0">否</el-radio>
            <el-input v-model="editForm.sort" placeholder="输入排序"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="在拒量页展示">
          <div class="formitem">
            <el-radio v-model="editForm.rejectType" label="1">是</el-radio>
            <el-radio v-model="editForm.rejectType" label="0">否</el-radio>
            <el-input
              v-model="editForm.rejectSort"
              placeholder="输入排序"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="在发现页展示">
          <div class="formitem">
            <el-radio v-model="editForm.loanType" label="1">是</el-radio>
            <el-radio v-model="editForm.loanType" label="0">否</el-radio>
            <el-input
              v-model="editForm.loanSort"
              placeholder="输入排序"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="Android访问">
          <el-radio v-model="editForm.androidStatus" label="app"
            >app内访问</el-radio
          >
          <el-radio v-model="editForm.androidStatus" label="llq"
            >浏览器访问</el-radio
          >
        </el-form-item>
        <el-form-item label="IOS访问">
          <el-radio v-model="editForm.iosStatus" label="app"
            >app内访问</el-radio
          >
          <el-radio v-model="editForm.iosStatus" label="llq"
            >浏览器访问</el-radio
          >
        </el-form-item>
        <el-form-item label="保存后立即开启">
          <el-radio v-model="editForm.status" label="1">立即开启</el-radio>
          <el-radio v-model="editForm.status" label="0">暂不开启</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSub">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="分配渠道"
      :visible.sync="allotChannel.dialogVisible"
      width="50%"
    >
      <el-form ref="editFormRef" :model="editForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="平台名称">
              <el-input v-model="editForm.dcName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="着陆页">
              <el-input v-model="editForm.dcPath" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="渠道">
              <el-alert
                style="margin-bottom: 10px"
                title="1、只显示当前已开启的流量渠道，如banner开关未开启，只更新loanurl，客户端不显示"
                type="info"
                show-icon
              >
              </el-alert>
              <el-transfer
                filterable
                v-model="allotChannel.targetChannelData"
                :titles="['待分配', '已分配']"
                filter-placeholder="请输入渠道名称"
                :data="allotChannel.sourceChannelData"
                :props="{
                  key: 'channelCode',
                  label: 'channelName',
                }"
              >
              </el-transfer>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateLoanChannel()">保存</el-button>
        <el-button
          type="primary"
          @click="
            allotChannel.dialogVisible = false;
            allotChannel.targetChannelData = [];
            allotChannel.sourceChannelData = [];
          "
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <recharge-dialog ref="rechargeRef"></recharge-dialog>
  </div>
</template>

<script>
import RechargeDialog from "./modules/RechargeDialog.vue";
export default {
  components: { RechargeDialog },
  data() {
    return {
      settleTypeOptions: ["PV", "UV"],
      datePicker: [],
      tableList: [],
      tableListC: [],
      pageCount: 1,
      pageSize: 20,
      total: 0,
      pageCountC: 1,
      pageSizeC: 20,
      totalC: 0,
      addForm: {},
      addDialogVisible: false,
      editForm: {},
      editDialogVisible: false,
      seachlist: { name: "" },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      isFirstEnter: false,
      loanMarketTypeList: [] /* 平台类型 */,
      activeName: "1",
      nameC: "",
      allotChannel: {
        dialogVisible: false,
        sourceChannelData: [],
        targetChannelData: [],
      },
    };
  },
  created() {
    this.getTableList();
    this.getTableListC();
    this.isFirstEnter = true;
  },
  beforeRouteEnter(to, from, next) {
    if (from.path == "/loansurplusesDetail") {
      to.meta.isBack = true;
    }
    next();
  },
  activated() {
    if (!this.$route.meta.isBack || this.isFirstEnter) {
      this.pageCount = 1;
      this.pageSize = 20;
      this.pageCountC = 1;
      this.pageSizeC = 20;
      this.activeName = "1";
      this.nameC = "";
      this.total = 0;
      this.totalC = 0;
      this.seachlist = { name: "" };
      this.tableList = [];
      this.tableListC = [];
      this.getTableList();
      this.getTableListC();
    }
    this.$route.meta.isBack = false;
    this.isFirstEnter = false;
  },
  methods: {
    onChangeDate(value) {
      if (value?.length && value?.length == 2) {
        [this.addForm.fkStartTime, this.addForm.fkEndTime] = value;
      } else {
        this.addForm.fkStartTime = "";
        this.addForm.fkEndTime = "";
      }
    },
    async getTableList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const { data: typeList } = await this.$http.post(
        "/loanMarketType/list",
        {}
      );
      console.log(typeList);
      this.loanMarketTypeList = typeList.data;

      const { data: res } = await this.$http.post("/loanMarket/list", {
        name: this.seachlist.name,
        status: "1",
        pageCount: this.pageCount,
        pageSize: this.pageSize,
      });
      // console.log(res);
      this.tableList = res.data.records;
      this.total = res.data.total;
      setTimeout(() => {
        loading.close();
      }, 500);
    },
    getsearchTableList() {
      this.pageCount = 1;
      this.getTableList();
    },
    async getTableListC() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const { data: res } = await this.$http.post("/loanMarket/list", {
        name: this.nameC,
        status: "0",
        pageCount: this.pageCountC,
        pageSize: this.pageSizeC,
      });
      setTimeout(() => {
        loading.close();
      }, 500);
      // console.log(res);
      this.tableListC = res.data.records;
      this.totalC = res.data.total;
    },
    getsearchTableListC() {
      this.pageCountC = 1;
      this.getTableListC();
    },
    clear() {
      this.seachlist = { name: "", status: "" };
      this.getTableList();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageCount = val;
      this.getTableList();
    },
    handleSizeChangeC(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSizeC = val;
      this.getTableListC();
    },
    handleCurrentChangeC(val) {
      // console.log(`当前页: ${val}`);
      this.pageCountC = val;
      this.getTableListC();
    },
    showAdd() {
      this.addForm = {
        // 0625
        shelvesStartTime: "",
        shelvesEndTime: "",
        settleType: "",
        settleUnitPrice: "",
        rechargeTotleAmount: "",
        rechargeRemainingAmount: "",

        sort: "",
        dcName: "",
        icon: "",
        dcPath: "alipays://platformapi/startapp?appId=20000067&url=",
        dayInterestRate: "",
        maxAmt: "",
        loanPeople: "",
        fkStartTime: "",
        fkEndTime: "",
        tagVoList: [
          { value: "", code: "" },
          { value: "", code: "" },
        ],
        isHot: "0",
        type: "0",
        status: "0",
        rejectType: "0",
        rejectSort: "",
        loanType: "0",
        androidStatus: "app",
        iosStatus: "app",
        loanSort: "",
        singleAmt: "",
        isLoginShow: "0",
      };
      this.addDialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    async addSub() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (this.addForm.sort == "") {
        this.addForm.sort = "0";
      }
      if (this.addForm.rejectSort == "") {
        this.addForm.rejectSort = "0";
      }
      if (this.addForm.loanSort == "") {
        this.addForm.loanSort = "0";
      }
      if (this.addForm.singleAmt == "" || this.addForm.singleAmt == null) {
        this.addForm.singleAmt = "0";
      }
      const { data: res } = await this.$http.post(
        "/loanMarket/save",
        this.addForm
      );
      console.log(res);
      setTimeout(() => {
        loading.close();
      }, 500);
      if (res.code !== 200) {
        return this.$message.error(res.msg);
      } else {
        this.$message.success("修改成功");
        this.addDialogVisible = false;
        this.getTableList();
        this.getTableListC();
      }
    },
    recharge(id) {
      console.log("recharge: ", id);
      this.$refs.rechargeRef.open(id);
    },
    async showEdit(id) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        const { data: res } = await this.$http.post("/loanMarket/getById", {
          id: id,
        });
        console.log(res);
        // setTimeout(() => {
        //   loading.close();
        // }, 500);
        this.editForm = res.data;
        var tagVoList = JSON.parse(this.editForm.description);
        this.datePicker = [this.editForm.fkStartTime, this.editForm.fkEndTime];
        // if(this.editForm.icon!=''){
        var urlBase = "";
        await this.$base64Img(this.editForm.icon).then((res) => {
          //调用全局方法
          urlBase = res;
        });

        this.editForm.icon = urlBase.split(",")[1];
        // }
        this.$set(this.editForm, "tagVoList", tagVoList);
        if (this.editForm.tagVoList == undefined) {
          this.$set(this.editForm, "tagVoList", [
            { code: "", value: "" },
            { code: "", value: "" },
          ]);
        }
      } catch (e) {
        console.log("error: ", e);
      } finally {
        loading.close();
        this.editDialogVisible = true;
      }
    },
    async showAllotChannel(id) {
      this.listChannel();
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      const { data: res } = await this.$http.post("/loanMarket/getById", {
        id: id,
      });
      console.log(res);
      this.editForm = res.data;

      this.allotChannel.dialogVisible = true;

      setTimeout(() => {
        loading.close();
      }, 500);
    },
    async listChannel() {
      let channellist = { pageSize: 1000, pageCount: 1, isOpen: "1" };
      const { data: res } = await this.$http.post(
        "/outLinkChannel/listChannel",
        channellist
      );
      console.log(res);

      res.data.records.forEach((element) => {
        if (element.loanUrl == this.editForm.dcPath) {
          this.allotChannel.sourceChannelData.push({
            channelCode: element.channelCode,
            channelName: element.channelName,
            disabled: true,
          });

          this.allotChannel.targetChannelData.push(element.channelCode);
        } else {
          this.allotChannel.sourceChannelData.push({
            channelCode: element.channelCode,
            channelName: element.channelName,
            disabled: false,
          });
        }
      });
    },
    filterMethod() {
      // this.listChannel();
    },
    async updateLoanChannel() {
      //保存分配的渠道banner
      let channelCodes = [];
      //   debugger
      //   console.info(this.allotChannel.targetChannelData)
      //   this.allotChannel.targetChannelData.forEach(element => {
      // 	  channelCodes.push(element.channelCode);
      //   });
      let model = {
        loanUrl: this.editForm.dcPath,
        channelCodes: this.allotChannel.targetChannelData,
      };
      const { data: res } = await this.$http.post(
        "/outLinkChannel/updateChannelBannerLoanUrl",
        model
      );

      console.log(res);
      if (res.code == 200) {
        this.$message.success("更新成功");
        this.allotChannel.dialogVisible = false;
        this.allotChannel.sourceChannelData = [];
        this.allotChannel.targetChannelData = [];
        this.getsearchTableList();
      }
    },
    async editSub() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (this.editForm.singleAmt == "" || this.editForm.singleAmt == null) {
        this.editForm.singleAmt = "0";
      }
      const { data: res } = await this.$http.post(
        "/loanMarket/update",
        this.editForm
      );
      setTimeout(() => {
        loading.close();
      }, 500);
      if (res.code !== 200) {
        return this.$message.error(res.msg);
      } else {
        this.$message.success("修改成功");
        this.editDialogVisible = false;
        this.getTableList();
        this.getTableListC();
      }
    },
    // 监听switch状态改变
    async statusChanged(tableList, id) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const { data: res } = await this.$http.post("/loanMarket/updateType", {
        id: id,
        type: tableList.status,
      });
      setTimeout(() => {
        loading.close();
      }, 500);
      this.getTableList();
      this.getTableListC();
      if (res.code !== 200) {
        return this.$message.error("修改状态失败");
      }
      this.$message.success("修改状态成功");
    },
    goDetail(id) {
      this.$router.push({ path: "/loansurplusesDetail", query: { id: id } });
    },
    chooseImage() {
      document.getElementById("upload_file").click(); //触发input-file文件上传控件 事件photoChange
    },
    async photoChange(el) {
      var file = el.target.files[0]; //name: "dangqi1.png" || type: "image/png"
      var type = file.type.split("/")[0];
      if (type === "image") {
        var dataURL = await this.toBase64(file);
        this.addForm.icon = dataURL.split(",")[1];
      } else {
        alert("上传了非图片");
      }
    },
    chooseImageUpdate() {
      document.getElementById("upload_file_update").click(); //触发input-file文件上传控件 事件photoChange
    },
    async photoUpdateChange(el) {
      var file = el.target.files[0]; //name: "dangqi1.png" || type: "image/png"
      var type = file.type.split("/")[0];
      if (type === "image") {
        var dataURL = await this.toBase64(file);
        this.editForm.icon = dataURL.split(",")[1];
      } else {
        alert("上传了非图片");
      }
    },
    toBase64(file) {
      return new Promise(function (resolve, reject) {
        //将图片img转化为base64
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function () {
          resolve(reader.result);
        };
      });
    },
    handleClick() {
      // console.log(this.activeName);
    },
  },
};
</script>

<style lang="less" scoped>
.tablelist-li-tit {
  font-size: 12px;
  color: #3878ea;
  margin-bottom: 4px;
  cursor: pointer;
}
.scope-img {
  height: 50px;
  width: 50px;
}
.el-icon-success {
  font-size: 26px;
  color: green;
}
.el-icon-error {
  font-size: 26px;
  color: #d60404;
}
.formitem {
  display: flex;
  align-items: center;
}
.el-form-item {
  margin-bottom: 10px;
}
.inp-1 {
  width: 30%;
  margin-right: 10px;
}
.inp-2 {
  width: 20%;
}
.editIcon {
  width: 80px;
  height: 80px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.el-transfer-panel__filter .el-input__icon {
  margin-left: 15px;
}
</style>
